<!--
 * @Description: 我的收藏页面组件
 * @Author: hai-27
 * @Date: 2020-02-20 17:22:56
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-12 19:34:00
 -->
<template>
	<div>
		<div class="root">
			<div class="divider"></div>
			<span class="title">修改密码</span>
		</div>
		<el-form style="padding-bottom: 60px;" :rules="rules" :model="userPassword" ref="ruleForm" status-icon>
			<el-form-item prop="oldPassword">
				<div class="label" style="float: left">原密码：</div>
				<div class="control">
					<el-input class="PlainField-root" v-model="userPassword.oldPassword" type="password"
							  show-password
							  autocomplete="off" placeholder="请输入原密码"/>
				</div>
			</el-form-item>
			<el-form-item prop="newPassword">
				<div class="label" style="float: left">新密码：</div>
				<div class="control">
					<el-input class="PlainField-root" v-model="userPassword.newPassword" type="password"
							  show-password
							  autocomplete="off" placeholder="请输入新密码"/>
				</div>
			</el-form-item>
			<el-form-item prop="reNewPassword">
				<div class="label" style="float: left">重复新密码：</div>
				<div class="control">
					<el-input class="PlainField-root" v-model="userPassword.reNewPassword" type="password"
							  show-password
							  autocomplete="off" placeholder="请重复新密码"/>
				</div>
			</el-form-item>
			<el-form-item>
				<div class="root">
					<div class="section-bar">
						<div class="btn">
							<a href="javascript:void(0);" @click="updatePassword()"
							   class="btn-base btn-primary">重置密码</a>
						</div>
					</div>
				</div>
			</el-form-item>
		</el-form>
	
	</div>
</template>
<script>
	import {mapGetters} from "vuex";
	
	export default {
		data() {
			// 原密码的校验方法
			let validateOldPassword = (rule, value, callback) => {
				if (value === "") {
					return callback(new Error("请输入原密码！"));
				}
				// 原密码以字母开头,长度在6-18之间,允许字母数字下划线
				const oldPasswordRule = /^[a-zA-Z]\w{5,17}$/;
				if (oldPasswordRule.test(value)) {
					//判断数据库中该用户的密码是否与输入的一致
					let id = this.$store.getters.getUser.id;
					this.$axios
						.get(`/user/selectById/${id}`)
						.then(res => {
							// 用户存在，检查密码是否一致
							let user = res.data.data;
							if (user.password === value) {
								this.$refs.ruleForm.validateField("checkPass");
								return callback();
							} else {
								return callback(new Error(res.data.msg));
							}
						})
						.catch(err => {
							return Promise.reject(err);
						});
				} else {
					return callback(new Error("字母开头,长度6-18之间,允许字母数字下划线"));
				}
			};
			//新密码密码的校验方法
			let validateNewPassword = (rule, value, callback) => {
				if (value === "") {
					return callback(new Error("请输入密码"));
				}
				// 密码以字母开头,长度在6-18之间,允许字母数字和下划线
				const passwordRule = /^[a-zA-Z]\w{5,17}$/;
				if (passwordRule.test(value)) {
					this.$refs.ruleForm.validateField("checkPass");
					return callback();
				} else {
					return callback(
						new Error("字母开头,长度6-18之间,允许字母数字和下划线")
					);
				}
			};
			// 重复密码的校验方法
			let validateReNewPassword = (rule, value, callback) => {
				if (value === "") {
					return callback(new Error("请重复输入新密码！"));
				}
				// 校验是否以密码一致
				if (this.userPassword.newPassword != "" && value === this.userPassword.newPassword) {
					this.$refs.ruleForm.validateField("checkPass");
					return callback();
				} else {
					return callback(new Error("两次输入的密码不一致"));
				}
			};
			return {
				userPassword: {
					oldPassword: "",
					newPassword: "",
					reNewPassword: "",
				},
				visible: false, // 是否退出登录
				//重置密码校验规则
				rules: {
					oldPassword: [{validator: validateOldPassword, trigger: "blur"}],
					newPassword: [{validator: validateNewPassword, trigger: "blur"}],
					reNewPassword: [{validator: validateReNewPassword, trigger: "blur"}]
				}
			};
		},
		watch: {},
		methods: {
			updatePassword() {
				// 通过element自定义表单校验规则，校验用户输入的用户信息
				this.$refs["ruleForm"].validate(valid => {
					//如果通过校验开始注册
					if (valid) {
						this.$axios
							.put("/user/updatePassword", {
								oldPassword: this.userPassword.oldPassword,
								newPassword: this.userPassword.newPassword,
								id: this.$store.getters.getUser.id
							})
							.then(res => {
								if (res.data.code === 0) {
									this.notifySucceed(res.data.msg);
									//退出登录
									this.visible = false;
									// 清空本地登录信息
									localStorage.setItem("user", "");
									// 清空vuex登录信息
									this.setUser("");
									//刷新跳转首页
									
								} else {
									this.notifyError(res.data.msg);
								}
							})
							.catch(err => {
								return Promise.reject(err);
							});
					}else {
						this.notifyError('验证失败！无法修改');
					}
				})
			}
		},
		computed: {
			...
				mapGetters(["getUser", "getNum"])
		}
	}
</script>
<style>
	.root {
		font-weight: 500;
		line-height: 40px;
		position: relative
	}
	
	[dir] .root {
		padding: 10px 20px
	}
	
	.divider {
		display: inline-block;
		height: 20px;
		vertical-align: middle
	}
	
	[dir=ltr] .divider {
		border-left: 4px solid rgba(0, 0, 0, .8);
		margin: 0 6px 0 -10px
	}
	
	.title {
		color: rgba(0, 0, 0, .8);
		display: inline-block;
		font-size: 19px;
		vertical-align: middle
	}
	
	.label {
		-ms-flex-align: center;
		align-items: center;
		display: -ms-flexbox;
		display: flex;
		height: 60px;
		text-align: right;
		width: 120px
	}
	
	.control {
		width: 360px;
		display: inline-block;
	}
	
	.section-bar {
		padding: 20px 48px;
		border-top: 2px solid #f5f5f5;
		overflow: hidden;
	}
	
	.section-bar .btn {
		float: initial;
	}
	
	.section-bar .btn .btn-base {
		float: left;
		margin-left: 30px;
		width: 158px;
		height: 38px;
		border: 1px solid #b0b0b0;
		font-size: 14px;
		line-height: 38px;
		text-align: center;
	}
	
	.btn-primary {
		float: right;
		width: 200px;
		text-align: center;
		font-size: 18px;
		margin-left: 50px;
		background: #ff6700;
		color: #fff;
	}
	
	.PlainField-root {
		color: rgba(0, 0, 0, .8);
		/*color: var(--text-secondary-color);*/
		font-size: 17px;
		line-height: 60px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin: 8px;
	}
	
	[dir] .PlainField-root {
		padding: 0 20px
	}
</style>